<template>
    <div class="devData">
        <div style="width: 65%;">
            <div class="title">{{ devData.nickname }}</div>
            <div class="text">接入时间: {{ boundtimeSlip }}</div>
            <div class="text">最近连接: {{ logintimeSlip }}</div>
        </div>
        <div class="planimg"></div>

    </div>
</template>
<script setup lang='ts'>
import { computed, onMounted } from 'vue'
// import  useGMapManage from '@/store/modules/Gmap'
// const useGMapManageHook = useGMapManage()

const props = defineProps(['devData'])
const boundtimeSlip = computed(() => {
    return props.devData.bound_time.slice(0, 10)
})

const logintimeSlip = computed(() => {
    return props.devData.login_time.slice(0, 10)
})


onMounted(() => {

})
</script>

<style scoped lang='scss'> .devData {
     height: 80px;
     width: 265px;
     margin: 0 auto;
     margin-top: 15px;
     border-radius: 10px;
     background-color: rgb(255, 255, 255);
     font-size: 17px;
     padding: 8px;
     box-shadow: 0 1px 15px rgb(179, 179, 179);
     box-sizing: border-box;
     display: flex;

     .title {
         margin: 5px;
     }

     .text {
         font-size: 15px;

     }
 }
 .planimg{
    width: 35%;
    background: 50% 50%  url("../../../assets/image/Wurenji.png");
    background-size: 75%;
    background-repeat: no-repeat
 }
</style >
